<script setup>
import { nextTick, onMounted, ref } from 'vue';

import ElColorPicker from 'el-color-picker';
import {
  ElCollapse,
  ElCollapseItem,
  ElInput,
  ElInputNumber,
  ElOption,
  ElSelect,
  ElSwitch,
} from 'element-plus';

import { usePlottingMapStore } from '#/store/modules/mapStore';

const mapStore = usePlottingMapStore();

const activeKey = ref(['1', '2']);
const isPanelOpen = ref(false);

// 添加全局点击事件处理
// const handleGlobalClick = (event) => {
//   // 如果点击的不是颜色面板内的元素，重置状态
//   if (!event.target.closest('.c__panel')) {
//     isPanelOpen.value = false;
//   }
// };

function handleColorPickerClick(event) {
  const pickerEl = event.target.closest('.c__color-picker');
  if (!pickerEl) return;

  nextTick(() => {
    const rect = pickerEl.getBoundingClientRect();
    const panels = document.querySelectorAll('.c__panel');
    panels.forEach((panel) => {
      panel.style.top = `${rect.bottom}px`;
      panel.style.left = `${rect.left}px`;
    });
    isPanelOpen.value = true;
  });
}

function onInputChange(e, name, group) {
  mapStore.applyAttribChange(group, name, e);
}

onMounted(() => {});
</script>

<template>
  <div class="l-container scrollbar">
    <div class="l-header">标绘属性</div>
    <div class="collapse-container">
      <ElCollapse v-model="activeKey">
        <ElCollapseItem name="1">
          <template #title>
            <span class="title-span">样式</span>
          </template>
          <div
            v-for="item in mapStore.nodeSettings.styleProperty"
            :key="item.name"
            class="settings-item"
          >
            <span class="setting-name">{{ item.name }}</span>
            <span>
              <ElInput
                v-if="item.editor === 'input'"
                v-model="item.value"
                @change="onInputChange($event, item.name, 'style')"
                clearable
                style="width: 150px"
              />
              <ElInputNumber
                v-else-if="item.editor === 'input-number'"
                v-model="item.value"
                @change="onInputChange($event, item.name, 'style')"
              />
              <ElSelect
                v-else-if="item.editor === 'select'"
                v-model="item.value"
                @change="onInputChange($event, item.name, 'style')"
                style="width: 100px"
              >
                <ElOption
                  v-for="option in item.options"
                  :key="option.label"
                  :label="option.label"
                  :value="option.value"
                />
              </ElSelect>
              <ElSwitch
                v-else-if="item.editor === 'switch'"
                v-model="item.value"
                @change="onInputChange($event, item.name, 'style')"
              />
              <ElColorPicker
                v-else-if="item.editor === 'color'"
                v-model:value="item.value"
                @change="onInputChange($event, item.name, 'style')"
                @mousedown="handleColorPickerClick"
              />
            </span>
          </div>
        </ElCollapseItem>

        <ElCollapseItem name="2">
          <template #title>
            <span class="title-span">位置</span>
          </template>
          <div
            v-for="item in mapStore.nodeSettings.geomProperty"
            :key="item.name"
            class="settings-item"
          >
            <span class="setting-name">{{ item.name }}</span>
            <span>
              <ElInput
                v-if="item.editor === 'input'"
                v-model="item.value"
                @change="onInputChange($event, item.name, 'geometry')"
                clearable
                style="width: 150px"
              />
            </span>
          </div>
        </ElCollapseItem>
      </ElCollapse>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// @mixin input-style {
//   background: #2e3138;
//   border: solid 1px #6366f1;
//   width: 100%;
//   color: #7376e9;
// }

.l-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  color: white;
  background-color: rgb(51 59 73);

  .l-header {
    // text-align: center;
    box-sizing: border-box;
    width: 100%;
    height: 5vh;
    padding: 0 1vw;
    // font-size: calc(0.65vh + 0.65vw);
    font-size: large;
    font-weight: 600;
    line-height: 5vh;
    color: #fff;
    vertical-align: center;
    background: rgb(51 59 73);
    border-bottom: solid 1px #fff;
  }

  .settings-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 1vh 0;

    span {
      flex: 1;
      color: #2e3138;
    }
  }

  .setting-name {
    margin-left: 5px;
    font-size: 15px;
  }

  .title-span {
    margin-left: 10px;
    font-size: 16px;
  }
}

.scrollbar {
  overflow: auto;
}

.scrollbar::-webkit-scrollbar {
  width: 5px;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px;
}

.scrollbar::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 10px;
}

:deep(.c__panel) {
  position: fixed !important;
  z-index: 9999;
}

/* 确保颜色选择器的容器有正确的定位上下文 */
.settings-item span div {
  position: relative;
}

.send-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  margin: 0 auto;
}

// .collapse-container {
//   overflow: hidden;
// }

:deep(.el-collapse-item__content) {
  // margin: 0 5px;
  border-top: 1px solid black;
}
</style>
